<?xml version="1.0" encoding="UTF-8" ?>

<!-- One XSLT that use HTML + CSS to display all the relevant information about the games of a specific week, 
with a parameter that identify the requested week. -->

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
	<xsl:output method="html" indent="yes"/>
	
    <xsl:param name="query">fixtures_1</xsl:param>
	<xsl:param name="type">html</xsl:param>
	
	<xsl:template match="/">
		 <xsl:choose>
            <xsl:when test="$type = 'html'">
						<html>
							<head>
								<title>XpertStats XML - Tabela Classificativa</title>
								<link href="css/bluedream.css" media="screen" rel="stylesheet" type="text/css" />
								<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
								<link rel="shortcut icon" href="images/logo.ico" />
								<link rel="icon" type="image/gif" href="images/logo.ico" />
								<script type="text/javascript"> 
											var query = '<xsl:value-of select="$query"/>';
											var xslFile = "xslt/fixture_page.xslt";
											var xmlFile = "fixture_data.xml"
								</script>
								<script type="text/javascript" src="js/XSLT-sort.js"/> 
			
							</head>
							<body>
								<div id="wrapper">
									<div id="header">
										<div id="header_content">
											<img src="./images/logo.png"/>
											<div style="float:right; margin-top: 15px;">
												<form name="form" id="searchbox">
													<select id="steam" onchange="javascript:queryGo(document.getElementById('steam').options[document.getElementById('steam').selectedIndex].value)">
									<xsl:for-each select="/league_fixtures/fixture">
														<option>
															<xsl:attribute name="value"><xsl:value-of select="@id" /></xsl:attribute>
															Week <xsl:value-of select="substring-after(@id,'fixtures_')"/>
														</option>
					</xsl:for-each>					
						
													</select>
													<input type="button" value="Go" onclick="javascript:queryGo(document.getElementById('steam').options[document.getElementById('steam').selectedIndex].value)"/>
												</form>
											</div>			
										</div>
									</div>  
									<div id="menuStrip">
										<ul class="menu">
											  <li><a href="stadiums_data.xml"><span>Stadiums</span></a></li>
											  <li><a href="teams_data.xml"><span>Teams</span></a></li>
											  <li><a href="players_data.xml"><span>Players</span></a></li>
											  <li><a href="fixtures_data.xml"  class="active"><span>Fixtures</span></a></li>
										</ul>    
									</div>
						
									
										<xsl:for-each select="league_fixtures">
											<xsl:apply-templates select="/league_fixtures/fixture[@id = $query]" />
										</xsl:for-each>
									
								</div>
								<div id="footer">
									<div id="footerD">
										<div id="footerF" class="aligned">XpertStats XML - Desenvolvido no âmbito da cadeira CTXML 2011 @ FCT-UNL</div>
										<div id="footerS" class="aligned">Por: Ricardo Mestre e Nuno Gomes</div>
									</div>
								</div>    
							</body>
						</html>
			</xsl:when>	           
			
            <xsl:when test="$type = 'newHTML'">
								<div id="wrapper">
									<div id="header">
										<div id="header_content">
											<img src="./images/logo.png"/>
											<div style="float:right; margin-top: 15px;">
								<form name="form" id="searchbox">
									<select id="steam" onchange="javascript:queryGo(document.getElementById('steam').options[document.getElementById('steam').selectedIndex].value)">
					<xsl:for-each select="/league_fixtures/fixture">
										<option>
											<xsl:attribute name="value"><xsl:value-of select="@id" /></xsl:attribute>
											Week <xsl:value-of select="substring-after(@id,'fixtures_')"/>
										</option>
					</xsl:for-each>					
						
									</select>
				                    <input type="button" value="Go" onclick="javascript:queryGo(document.getElementById('steam').options[document.getElementById('steam').selectedIndex].value)"/>
								</form>
							</div>			
										</div>
									</div>  
									<div id="menuStrip">
										<ul class="menu">
											  <li><a href="stadiums_data.xml"><span>Stadiums</span></a></li>
											  <li><a href="teams_data.xml"><span>Teams</span></a></li>
											  <li><a href="players_data.xml"><span>Players</span></a></li>
											  <li><a href="fixtures_data.xml"  class="active"><span>Fixtures</span></a></li>
										</ul>    
									</div>
						
									
										<xsl:for-each select="league_fixtures">
											<xsl:apply-templates select="/league_fixtures/fixture[@id = $query]" />
										</xsl:for-each>
									
								</div>
            </xsl:when>
			
			<xsl:otherwise>
				<xsl:apply-templates select="/league_fixtures/fixture[@id = $query]"/>
	        </xsl:otherwise>
		</xsl:choose>
	</xsl:template>

	<xsl:template match="fixture">
		<div id="main" style="padding-top: 10px;">   
			<section class="week">
				<xsl:attribute name="week" select="substring-after(@id,'fixtures_')" />
				<h1>Semana <xsl:value-of select="substring-after(@id,'fixtures_')"/></h1>
				<xsl:apply-templates select="game" />
			</section>
		</div>
	</xsl:template>
	
	<xsl:template match="game">
		<xsl:variable name="homeId" select="concat('team_',home_team)" />
		<xsl:variable name="visitorId" select="concat('team_',visitor_team)" />
		<section>
			<header>
				<a href="javascript:viewTeam('{$homeId}')" class="clubtitle">
					<h2><xsl:value-of select="home_team/@name"/></h2>
					<img>
						<xsl:attribute name="src">images/teams/s<xsl:value-of select="home_team"/>.png</xsl:attribute>
						<xsl:attribute name="border">0</xsl:attribute>
					</img>
				</a>
				
				<span><xsl:value-of select="home_team/@goals"/> - <xsl:value-of select="visitor_team/@goals"/></span>
				
				<a href="javascript:viewTeam('{$visitorId}')" class="clubtitle">
					<img>
						<xsl:attribute name="src">images/teams/s<xsl:value-of select="visitor_team"/>.png</xsl:attribute>
						<xsl:attribute name="border">0</xsl:attribute>
					</img>
					<h2><xsl:value-of select="visitor_team/@name"/></h2>
				</a>
				
			</header>
			<div class="vbar">
				<table class="geral" width="100%">
					<tbody>
						<tr style="height:35px;">
							<th colspan="6" style=" text-align:center;">Line Up</th>
						</tr>
						
						<xsl:call-template name="printPlayersHome">
							<xsl:with-param name="playerList" select="lineup[@teamId = $homeId]"/>
						</xsl:call-template>
						
						
						<tr>
							<th colspan="6" style="height:35px; text-align:center;">Substitutes</th>
						</tr>
						<xsl:call-template name="printPlayersHome">
							<xsl:with-param name="playerList" select="substitutes[@teamId = $homeId]"/>
						</xsl:call-template>
						
					</tbody>
				</table>
				
				
										
			</div>
		
			
			<div class="right vbar"  width="100%">
				<table class="geral" width="100%">
					<tbody>
						<tr style="height:35px;">
							<th colspan="6" style="text-align:center">Line Up</th>
						</tr>
						<xsl:call-template name="printPlayersAway">
							<xsl:with-param name="playerList" select="lineup[@teamId = $visitorId]"/>
						</xsl:call-template>
						
						<tr style="height:35px;">
							<th colspan="6" style="text-align:center">Substitutes</th>
						</tr>
						<xsl:call-template name="printPlayersAway">
							<xsl:with-param name="playerList" select="substitutes[@teamId = $visitorId]"/>
						</xsl:call-template>
						
					</tbody>
				</table>
				
				
			</div>				

		</section>
	</xsl:template>
	



<xsl:template name="printPlayersHome">
<xsl:param name="playerList" />
	<xsl:for-each select="$playerList/player">
		<tr style="height:35px;">
			<td><xsl:value-of select="shirt" /></td>
			<td><a href="javascript:viewPlayer('{@id}')"><xsl:value-of select="name" /></a></td>
			<td><xsl:value-of select="position" /></td>
			<td>
					<xsl:for-each select="in">
						<img>
							<xsl:attribute name="src">images/in.png</xsl:attribute>
							<xsl:attribute name="border">0</xsl:attribute>
						</img>
						<xsl:value-of select="."/>' 
					</xsl:for-each>
					<xsl:for-each select="out">
						<img>
							<xsl:attribute name="src">images/out.png</xsl:attribute>
							<xsl:attribute name="border">0</xsl:attribute>
						</img>
						<xsl:value-of select="."/>' 
					</xsl:for-each>
			</td>
			<td>
					<xsl:for-each select="card[@color = 'yellow']">
						<img>
							<xsl:attribute name="src">images/camarelo.png</xsl:attribute>
							<xsl:attribute name="border">0</xsl:attribute>
						</img>
						<xsl:value-of select="."/>' 
					</xsl:for-each>
					<xsl:for-each select="card[@color = 'red']">
						<img>
							<xsl:attribute name="src">images/cvermelho.png</xsl:attribute>
							<xsl:attribute name="border">0</xsl:attribute>
						</img>
						<xsl:value-of select="."/>' 
					</xsl:for-each>
			</td>
			<td>
					<xsl:for-each select="goal">
						<img>
							<xsl:attribute name="src">images/goal.png</xsl:attribute>
							<xsl:attribute name="border">0</xsl:attribute>
						</img>
						<xsl:value-of select="."/>' 
					</xsl:for-each>
			</td>

		</tr>	
	</xsl:for-each>					
</xsl:template>

<xsl:template name="printPlayersAway">
<xsl:param name="playerList" />
	<xsl:for-each select="$playerList/player">
			<tr style="height:35px;">
			<td>
					<xsl:for-each select="goal">
						<img>
							<xsl:attribute name="src">images/goal.png</xsl:attribute>
							<xsl:attribute name="border">0</xsl:attribute>
						</img>
						<xsl:value-of select="."/>' 
					</xsl:for-each>
			</td>
			<td>
						<xsl:for-each select="card[@color = 'yellow']">
							<img>
								<xsl:attribute name="src">images/camarelo.png</xsl:attribute>
								<xsl:attribute name="border">0</xsl:attribute>
							</img>
							<xsl:value-of select="."/>' 
						</xsl:for-each>
						<xsl:for-each select="card[@color = 'red']">
							<img>
								<xsl:attribute name="src">images/cvermelho.png</xsl:attribute>
								<xsl:attribute name="border">0</xsl:attribute>
							</img>
							<xsl:value-of select="."/>' 
						</xsl:for-each>
			</td>
			<td>
						<xsl:for-each select="in">
							<img>
								<xsl:attribute name="src">images/in.png</xsl:attribute>
								<xsl:attribute name="border">0</xsl:attribute>
							</img>
							<xsl:value-of select="."/>' 
						</xsl:for-each>
						<xsl:for-each select="out">
							<img>
								<xsl:attribute name="src">images/out.png</xsl:attribute>
								<xsl:attribute name="border">0</xsl:attribute>
							</img>
							<xsl:value-of select="."/>' 
						</xsl:for-each>
				</td>
				<td><xsl:value-of select="position" /></td>
				<td><a href="javascript:viewPlayer('{@id}')"><xsl:value-of select="name" /></a></td>
				<td><xsl:value-of select="shirt" /></td>
			</tr>	
		</xsl:for-each>					
</xsl:template>


</xsl:stylesheet>

